import React from 'react';
import { connect } from 'dva';
import { ListView, Icon, Badge } from 'antd-mobile';
import avatar from '../../../framework/utils/avatar';
import { cutString } from '../../../framework/utils/cutStr';
import styles from './CustomListItem.css';
import date from '../../../framework/utils/date';
import { format } from '../../../framework/utils/distance';

import approve from '../../../icons/approve.png';
import realName from '../../../icons/realName.png';

const CustomListItem = ({
  item={},
  onViewMember=()=>{},
  showLimit=()=>{},
}) => {
  // console.log('item',JSON.stringify(item));
  // const publishTime = date.delta(item.publishTime)
  const renderAge = (birthday) => {
    if (birthday && birthday != '') {
      return date.age(birthday) + "岁";
    }
  }
  const baseStyle = {
    backgroundColor: 'transparent',
    borderRadius: 4,
    color: '#333',
    marginRight: 10,
  };
  const boxStyle = {
    ...baseStyle,
    height: '16px',
    lineHeight: '18px',
    color: '#ABABAB',
    border: '1PX solid #ABABAB',
    fontSize: '10px',
  };

  const validBoxStyle = {
    ...baseStyle,
    lineHeight:'20px',
    color: '#D99E00',
    border: '1PX solid #D99E00',
    fontSize: '10px',
    marginRight: 0,

  };

  return (
    <div key={item.id} >
      <div className={styles.content}>
        <div className={styles.avatar} onClick={() => showLimit(item.id)}>
          {avatar(item.typeName, item.typeCover)}
        </div>
        <div className={styles.detail} onClick={() => onViewMember(item.id)}>
          <div className={styles.item}>
            <div className={styles.name}>{cutString(item.title, 18)}</div>
            <div className={styles.distance}>
              {item.isStick?(<Badge text='置顶' style={boxStyle} />):''}
              {item.vip=="VIP" || item.vip=="PASS"?(
                <img src={realName} className={styles.realName}/>
              ):''}
            </div>
          </div>
          <div className={styles.item}>
            <div className={styles.price}>
              {item.wage ? `￥${item.wage}`: 0}{item.unitValue ? `/${item.unitValue}`:''}
            </div>
            <div className={styles.valid}>
              {/* <Badge text='认证' style={validBoxStyle} /> */}
              {item.vip=="VIP" ? (
                <img src={approve} className={styles.approve}/>
              ):''}
            </div>
          </div>
          <div className={styles.item}>
            <span style={{color:'#999999', fontSize:'0.75em'}}>{item.workDate}</span>
            <div className={styles.field}>{item.workSite} | {format(item.distance) ? format(item.distance) : '0'}</div>
            {/* <div className={styles.publishTime}>{publishTime}</div> */}
          </div>
        </div>
      </div>
    </div>
  );
};

CustomListItem.propTypes = {
};

export default connect()(CustomListItem);
